<template>
  <div class="map-navigation">
    <div class="map-container">
      <BMap
        :center="mapCenter"
        :zoom="zoom"
        :minZoom="minZoom"
        :mapType="mapTypeMap[mapView]"
        v-bind="mapSetting"
      >
        <BPolyline
          v-if="routePath && routePath.length > 0"
          :path="routePath"
          stroke-color="#000"
          :stroke-opacity="1"
          :stroke-weight="3"
        />

        <BMarker
          :zIndex="99"
          v-if="markerData && markerData.length > 0"
          v-for="marker in markerData"
          :position="marker.position"
          :icon="marker.icon"
        />
      </BMap>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { BMap } from "vue3-baidu-map-gl";
import type { MapProps } from "vue3-baidu-map-gl";

type RouteStep = {
  distance: number;
  duration: number;
  instruction: string;
  path: string;
  road_type?: number;
  traffic_condition?: {
    status: number;
    geo_cnt: number;
  }[];
};

type RouteData = {
  distance: number;
  duration: number;
  steps: RouteStep[];
};

// 地图类型映射
const mapTypeMap = {
  road: "BMAP_NORMAL_MAP",
  satellite: "BMAP_SATELLITE_MAP",
} as const;

// 地图类型
const mapView = ref<keyof typeof mapTypeMap>("road");

// 地图中心点
const mapCenter = ref<{ lng: number; lat: number } | null>({ lng: 114.305393, lat: 30.593099 });

// 地图基础配置
const mapSetting = ref<MapProps>({
  enableDragging: true,
  enableInertialDragging: true,
  enableScrollWheelZoom: true,
  enableContinuousZoom: true,
  enableResizeOnCenter: true,
  enableDoubleClickZoom: true,
  enableKeyboard: true,
  enablePinchToZoom: true,
  enableAutoResize: true,
  enableTraffic: true,
});

// 地图缩放级别
const zoom = ref(11);

// 地图最小缩放级别
const minZoom = ref(3);

// 路径
const routePath = ref<{ lng: number; lat: number }[] | null>(null);

// 标记点数据
const markerData = ref<{ position: { lng: number; lat: number }; icon: string }[] | null>(null);

const props = defineProps<{
  routeData: RouteData | null;
  travelMode: string;
}>();

watch(
  () => props.routeData,
  (newVal) => {
    if (
      props.travelMode === "driving" ||
      props.travelMode === "walking" ||
      props.travelMode === "cycling"
    ) {
      routePath.value = newVal?.steps.map((step) => ({
        lng: parseFloat(step.path.split(",")[0]),
        lat: parseFloat(step.path.split(",")[1]),
      }));

      markerData.value = [
        {
          position: routePath.value[0],
          icon: "start",
        },
        {
          position: routePath.value[routePath.value.length - 1],
          icon: "end",
        },
      ];

      // 设置地图中心点
      mapCenter.value = {
        lng: Number(routePath.value[0].lng + routePath.value[routePath.value.length - 1].lng) / 2,
        lat: Number(routePath.value[0].lat + routePath.value[routePath.value.length - 1].lat) / 2,
      };

      // 设置地图缩放级别
      zoom.value = 13;
    }
  }
);
</script>

<style lang="scss" scoped>
.map-navigation {
  height: 100%;
  display: flex;
  flex-direction: column;

  .map-container {
    flex: 1;
    background-color: #f5f7fa;
  }
}
</style>
